| |
Mapas Clicáveis
em uma página são figuras que permitem a associação
de áreas desta figura com links para diferentes URLs.
Estes mapas podem ser definidos de diferentes
maneiras; neste treinamento estaremos apresentando um método
bastante simples usando Client-Side Imagemap.
Para mapear uma imagem, você precisa de um mapeador.
Aqui vamos usar o Map This!, um freeware da XOOM
Map This endereço 1:
http://www.xoom.com/xoom/helpcenter/mapthis/mainmenu
Map This endereço 2:
http://www.ryerson.ca/dmp/webtools/othertools.html
Agora faça um desenho, o desenho abaixo foi feito com o Paint do Windows, o mais básico de todos.
Para desenhos mais avançados use outros editores de imagens.
Esse é só um exemplo de mapas, esses links não funcionam!
|
|
Código HTML
<MAP NAME=menu>
<AREA SHAPE=rect COORDS= "7, 10 104, 24" HREF=http://members.xoom.com/decios>
<AREA SHAPE=rect COORDS= "10, 35, 92,47" HREF=http://members.xoom.com/decios/site.html>
<AREA SHAPE=rect COORDS= "15, 58, 92, 73" HREF=http://members.xoom.com/decios/backgrounds.html>
<AREA SHAPE=rect COORDS= "19, 181, 92, 192" HREF=http://members.xoom.com/decios/anuncio.html>
<AREA SHAPE=rect COORDS= "13, 107, 104, 119" HREF=http://members.xoom.com/decios/java.html>
<AREA SHAPE=rect COORDS= "16, 134, 95, 143" HREF=http://members.xoom.com/decios/index2.html>
<AREA SHAPE=rect COORDS= "12, 155, 102, 168" HREF=http://members.xoom.com/decios/frame.html>
<AREA SHAPE=rect COORDS= "32, 204, 64, 215" HREF="mailto:d.e.c.i.o@zipmail.com.br"></MAP>
<IMG Border=0 SRC="indic.gif"
USEMAP="#menu" >
|
No exemplo acima a diretiva
MAP está definindo a criação do mapa e informando
seu nome. A diretiva AREA informa o formato,SHAPE, da área
"sensível" , suas coordenadas, COORD, e o endereço
da URL associada.
O formato da área
(SHAPE) pode ser
-
RECT - retângulo
- coordenadas x1,y1 , x2,y2
-
CIRC - círculo
- coordenadas x,y e raio r
-
POLY - polígono
- coordanadas x1,y1 , x2,y2 , x3,y3 , ...
A Diretiva <IMG ... USEMAP=
...> associa a defição do Mapa à Imagem.
[HOME]
DÚVIDAS ?
[E-MAIL]
|